<template>

  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>工单提交</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- <el-col :span="8" v-for="item of categoryList"> -->
    <el-col :span="24"
            v-for="(item, index) in depNameList"
            :key="index">
      <h1>{{item.depName}}工单问题</h1>
      <el-col :span="6"
              v-for="(item2, index) in item.categoryList"
              :key="index"
              style="margi:10px">
        <el-card :body-style="{ padding: '0px',align:'middle' }">
          <el-avatar size="large"> {{item2.categoryName}}</el-avatar>
          <div style="padding: 14px;">
            <span>{{item2.categoryName}}问题</span>
            <div class="bottom clearfix">
            </div>
          </div>
          <el-button type="text"
                     class="button"
                     @click="submit(item2.categoryId,item.categoryList)">提问</el-button>
          <!-- 路由传递自己选中的分类,以及所有的分类信息 -->
        </el-card>
      </el-col>
    </el-col>

  </div>
</template>

<script>
export default {
  data() {
    return {
      depNameList: [],
      category: [],
    }
  },
  created() {
    this.$axios
      .get('/api/tsQueCategory/list')
      .then((res) => {
        console.log(res)
        this.depNameList = res.data.data
        this.category = this.depNameList.categoryList
      })
      .catch()
  },
  methods: {
    // 提问按钮的方法
    submit(categoryId, categoryList) {
      console.log(categoryId)
      console.log(categoryList);
      //name是路由的名字
      this.$router.push({
        name: '提交工单',
        params: { categoryId: categoryId, categoryList: categoryList },
      })
    },
  },
}
</script>

<style>
.image {
  width: 150px;
  height: 150px;
  border-radius: 250px;
}
</style>